<template>
  <app-dialog-form
    :title="title"
    :confirm="handleDialogSubmit"
    @closed="handleDialogClose"
    @open="handleDialogOpen"
  >
    <el-form
      class="el-form--label-top"
      ref="form"
      :model="formData"
      :rules="formRules"
    >
      <el-form-item
        label="项目内容"
        prop="project_name"
      >
        <el-input
          v-model="formData.project_name"
          placeholder="请输入项目内容"
        />
      </el-form-item>
      <el-form-item
        label="所属客户"
        prop="customer_name"
      >
        <el-input
          v-model="formData.customer_name"
          placeholder="请输入所属客户"
        />
      </el-form-item>
      <el-form-item
        label="项目范围"
        prop="project_range"
      >
        <el-input
          v-model="formData.project_range"
          placeholder="请输入项目范围"
        />
      </el-form-item>
    </el-form>
  </app-dialog-form>
</template>

<script lang="ts" setup>
import type { IElForm, IFormItemRule } from '@/types/element-plus'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
const title = ref('创建新项目')
const form = ref<IElForm | null>(null)
const formLoading = ref(false)

const formData = ref({
  project_name: '',
  customer_name: '',
  project_range: ''
})

const formRules: IFormItemRule = {
  project_name: [
    { required: true, message: '请输入项目内容', trigger: 'blur' }
  ],
  customer_name: [
    { required: true, message: '请输入所属客户', trigger: 'blur' }
  ],
  project_range: [
    { required: true, message: '请输入项目范围', trigger: 'blur' }
  ]
}

interface EmitType {
  (e: 'update:id', value: number | null): void
  (e: 'success'): void
}

const emit = defineEmits<EmitType>()

const handleDialogSubmit = async () => {
  // const valid = await form.value?.validate()
  // if (!valid) {
  //   return
  // }
  // if (props.id) {
  // 编辑
  // } else {
  // 添加管理员
  // }
  emit('success')
  ElMessage.success('保存成功')
}

// 打开表单 加载 数据
const handleDialogOpen = () => {
  formLoading.value = true
  // Promise.all([loadRoles(), loadAdmin()]).finally(() => {
  //   formLoading.value = false
  // })
}

const handleDialogClose = () => {
  emit('update:id', null)
  // 清楚 form 表单 必须包含 form 必须包含 ref="form"
  form.value?.clearValidate() // 清除验证结果
  form.value?.resetFields() // 清除表单数据
}

</script>

<style lang="scss" scoped>
</style>
